<template>
  <el-container>
    <el-header class="header">
      <h1 class="header-title">用户中心</h1>
    </el-header>
    <el-main class="main">
      <el-card class="card">
        <div v-if="user">
          <el-table :data="[user]" style="width: 100%">
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="gender" label="性别"></el-table-column>
            <el-table-column label="作者身份">
              <template slot-scope="scope">
                <span v-if="scope.row.idwriter">是</span>
                <span v-else>否</span>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="!user.idwriter" class="form-section">
            <h3>申请成为作者</h3>
            <el-form @submit.prevent="becomeWriter">
              <el-form-item label="真实姓名">
                <el-input v-model="realName" class="rounded-input"></el-input>
              </el-form-item>
              <el-form-item label="笔名">
                <el-input v-model="penName" class="rounded-input"></el-input>
              </el-form-item>
              <el-button type="primary" @click="becomeWriter" plain>提交</el-button>
            </el-form>
          </div>
          <div v-else class="creator-menu">
            <h3>创作者菜单</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-button type="primary" @click="navigateTo('/writer')" plain>创作者中心</el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" @click="navigateTo('/chat')" plain>智能小说生成</el-button>
              </el-col>
            </el-row>
          </div>
          <el-divider></el-divider>
          <h3>修改用户信息</h3>
          <el-form @submit.prevent="updateUser">
            <el-form-item label="性别">
              <el-select v-model="user.gender" placeholder="请选择性别" class="rounded-input">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="user.username" class="rounded-input"></el-input>
            </el-form-item>
            <el-button type="primary" @click="updateUser" plain>保存修改</el-button>
          </el-form>
        </div>
        <div v-if="message">
          <el-alert :title="message" type="info" class="alert"></el-alert>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: null,
      realName: '',
      penName: '',
      message: ''
    };
  },
  created() {
    this.fetchUser();
  },
  methods: {
    fetchUser() {
      const token = localStorage.getItem('accessToken');
      axios.get('/api/users/me', {
        headers: {
          Authorization: `Bearer ${token}`
        }
      })
        .then(response => {
          this.user = response.data;
        })
        .catch(error => {
          console.error('Error fetching user:', error);
        });
    },
    updateUser() {
      const token = localStorage.getItem('accessToken');
      axios.put(`/api/users/${this.user.iduser}`, this.user, {
        headers: {
          Authorization: `Bearer ${token}`
        }
      })
        .then(response => {
          this.message = '用户信息已更新';
        })
        .catch(error => {
          console.error('Error updating user:', error);
          this.message = '用户信息更新失败';
        });
    },
    becomeWriter() {
      const token = localStorage.getItem('accessToken');
      axios.post('/api/writers/become-writer', null, {
        params: {
          realName: this.realName,
          penName: this.penName
        },
        headers: {
          Authorization: `Bearer ${token}`
        }
      })
        .then(response => {
          this.fetchUser();
          this.message = '申请成为作者成功';
        })
        .catch(error => {
          console.error('Error becoming writer:', error);
          this.message = '申请成为作者失败';
        });
    },
    navigateTo(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style scoped>
body {
  background-color: #9af59a; /* 浅绿色背景 */
  font-family: 'Microsoft YaHei', sans-serif; /* 微软雅黑字体 */
}

.header {
  background-color: #218838;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  border-bottom: none;
}

.header-title {
  background-color: #218838; /* 浅绿色背景 */
  padding: 10px 20px;
  border-radius: 10px;
}

.main {
  padding: 20px;
  display: flex;
  justify-content: center;
}

.card {
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 800px;
}

.el-form-item {
  margin-bottom: 15px;
}

.el-button {
  margin-top: 15px;
  width: 100%;
  border-radius: 20px;
  background-color: #28a745; /* 绿色按钮 */
  border-color: #28a745; /* 绿色按钮 */
  color: #155724; /* 深绿色文字 */
}

.el-button:hover, .el-button:focus {
  background-color: #218838; /* 深绿色按钮 */
  border-color: #1e7e34; /* 深绿色按钮 */
}

.form-section, .creator-menu {
  background-color: #f5faf8;
  padding: 20px;
  margin-top: 20px;
  border-radius: 20px;
}

.rounded-input .el-input__inner, .rounded-input .el-select__inner {
  border-radius: 20px;
}

.alert {
  margin-top: 20px;
  border-radius: 20px;
}
</style>
